<template>
    
    <!-- 组件的模板 -->
    <div class="page user-select multi-select">        
        <ul class="list com-border-top com-border-bottom">
            <li class="weui-cells_checkbox" v-for="item in memberList">
                <label class="touch" for="{{item.id}}">
                    <input  type="checkbox" 
                            value="{{item.id}}"
                            id="{{item.id}}"
                            v-model="selectMemberList"
                            class="weui-check"
                            name="checkbox3"
                            >
                    <i class="weui-icon-checked"></i>
                    <img v-if="item.logo" class="avatar" :src="item.logo">
                    <img v-if="!item.logo" class="avatar" src='../../static/imgs/avatar.png'>
                    <div class="info com-border-bottom">
                        <p class="title">
                            <span v-if="item.identity!='成员'" class="tag tag_1">{{item.identity}}</span>
                            <span v-if="item.status =='未激活'" class="tag tag_3">{{item.status}}</span>
                            {{item.real_name}}
                        </p>
                    </div>
                </label>
            </li>
        </ul>
        <div class="page__bd" v-show="showMore">
            <div class="weui-loadmore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>
        <div class="count bg-color com-border-top"><span class="num">已选择：<em>{{selectMemberList.length}}人</em></span><a class="mod-btn-s-1" :disabled="selectMemberList.length == 0" @click="submit">确定</a></div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import widget from 'gapi/widget'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import * as util from 'js/util.js'
    import Empty from 'components/Empty/Empty'


    let pageDate = {}
    let offset = 1 // 返回记录行的偏移量(从第几条数据开始取
    let rows = 50 // 返回记录行的最大条数（取的条数）
    let canLoadMore = 1
    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                showMore:false,
                memberList:[],
                selectMemberList:[],
                groupId:''
            }
        },
        computed:{

        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                cache.getCache('KqCacheMessge',(data)=>{
                    pageDate.project_id = util.getUrddataString('projectId')||data.project_id
                    pageDate.team_id = util.getUrddataString('teamId')||data.team_id
                    console.log(pageDate)
                    this.getMemberList()
                 })
                pageDate.teamIdForProject = util.getUrddataString('teamIdForProject')
                this.groupId = util.getUrddataString('groupId')
            },
            getMemberList(){
                if(!this.showMore){
                  commonPage.loadPageStatus('loading')
                }
                util.ajax({
                    url: '/team/member/list',
                    data: {
                        team_id:pageDate.team_id,
                        project_id: 0,
                        offset:offset,
                        rows:rows
                    },
                    success: (res) => {
                        console.log(res)
                         if(!this.showMore){
                          commonPage.loadPageStatus('loadSuccess')
                        }else{
                          this.showMore = false
                        }
                        if(res&&res.errno==0){
                            if(res.data.length){
                                res.data.forEach((item)=>{
                                    this.memberList.push(item)
                                })
                                offset+=rows
                            }else{
                                canLoadMore = 0
                            }
                        }else if(res.errmsg){
                             widget.toast(res.errmsg)
                        }else{
                            widget.toast('数据获取失败')
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            getMember(){
                let list = []
                this.memberList.forEach((item)=>{
                    if(this.selectMemberList.indexOf(item.id+'')>-1){
                        let member = {}
                        member.user_name = item.real_name
                        member.phone = item.mobile
                        // member.identity = item.identity!='成员' ?2:5
                        member.user_id = item.id
                        list.push(member)
                    }
                })
                return list
            },
            // 添加的团队成员
            updateData (data,webViewId){
                data.forEach((i) => {
                    i.group_id = this.groupId;
                });
                util.ajax({
                    url:'/group/member_add',
                    type:'POST',
                    data:{
                        user_list: JSON.stringify(data),
                        team_id: pageDate.teamIdForProject,
                        project_id: pageDate.project_id,
                        source : 4 //1二维码 2微信邀请 3手动添加 4团队成员 5通讯录
                    },
                    timeout:10000,
                    beforeSend: () => {

                    },
                    success:(result) => {
                        console.log(result)
                        if(result.errno == 0){
                            widget.toast('添加人员成功')
                            commonPage.goBack(1, {}, webViewId)
                        }else if(result.errno == 4){
                             widget.toast('您无权限操作此功能')
                        }else{
                             widget.toast(result.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        console.log(xhr)
                    },
                    complete: () => {

                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            submit(){
                var self = this
                let memberList = self.getMember()
                if(memberList.length == 0){
                    return
                }
                console.log(memberList)
                cache.getMemoryCache('xmAddMemberWebViewId',function(data){
                    if(data){
                        console.log(data)
                        self.updateData(memberList,data.webViewID)
                    }else{
                        commonPage.goBack(1,{'key':'selectTeamMember','value':memberList})
                    }
                })
            }
        },
        created(){
            this.init();
            commonPage.registerHitPageBottomListener(() => {
                if(canLoadMore==0){
                    widget.toast('没有更多数据')
                    return
                }
                this.showMore = true
                this.getMemberList()
            }, 0)
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>
